<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>i movie</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/order.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/template-web.js"></script>
    <script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css" />
    <script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/additional-methods.min.js"></script>
    <style>
        .footer{
            background-color: #262426;
            padding: 56px 0;
            min-width: 1200px;
            width: 100%;
            text-align: center;
        }
        .fix{
            position: fixed;
            bottom: 0;
            left: 0;
        }
        .div_imgall {
            width: 100px;
            height: 100px;
            position: relative;
        }
        .input_flie {
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 100;
            position: absolute;
            left: 0;
            top: 0;
        }
        .pre-pic{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }
        .error {
            font-size: 12px;
            color: #ef4238;
            margin-top: 8px;
        }
    </style>
    <script>
        $(function () {
            $('#info').hide();
            $('.tab-title').click(function () {
                $('.tab-title').removeClass('active');
                $(this).addClass('active');
                let index = $(this).index();
                if(index===0){
                    $('#info').hide();
                    $('#orderList').show();
                    if($('.film-list').length>=3){
                        $('#footer').removeClass('fix');
                    }
                }
                if(index===1){
                    $('#info').show();
                    $('#orderList').hide();
                    $('#footer').addClass('fix');
                }
            });
            NProgress.start();
            $.ajax({
                url:'${pageContext.request.contextPath}/front/cinema/getOrderList',
                dataType: "json",
                async:true,
                success:function (data) {
                    NProgress.done();
                    if(data.data.length!==0){
                        let html = template('orderLists',{list:data.data})
                        $('#order-Lists').html(html);
                        if(data.data.length<=3){
                            $('#footer').addClass('fix');
                        }else{
                            $('#footer').removeClass('fix');
                        }
                    }else{
                        $('#footer').addClass('fix');
                        $('#order-Lists').html('<span style="margin-top: 10px;display: block">暂无订单</span>');
                    }
                }
            });
            $.ajax({
                url:'${pageContext.request.contextPath}/front/user/getUserInfo',
                dataType: "json",
                async:true,
                success:function (data) {
                    console.log(data);
                    $('#avatar').attr('src',data.data.avatar);
                    $('#nickname').text(data.data.nickname);
                    // $('#exampleInputEmail1').val(data.data.nickname);
                    // $('#preavatar').attr('src',data.data.avatar);
                }
            });
            $('#save').click(function () {
                let flag = $('#changeInfo').valid();
                console.log(flag);
                if(flag){
                    NProgress.start();
                    var formData = new FormData();
                    formData.append('avatar', $('#photoFile')[0].files[0]);
                    formData.append('nickname',$('#exampleInputEmail1').val());
                    $.ajax({
                        url:'${pageContext.request.contextPath}/front/user/changeUserInfo',
                        dataType: "json",
                        async:true,
                        contentType: false,
                        processData: false,
                        type:'POST',
                        data:formData,
                        success:function (data) {
                            NProgress.done();
                            console.log(data)
                            if(data.status===1){
                                layer.msg("修改成功",{time:2000},function () {
                                    $('#myModal').modal('hide');
                                    window.location.reload();
                                });
                            }
                        }
                    })
                }
            });
            $('#changeInfo').validate({
                rules: {
                    nickname: {
                        required: true,
                    },
                    avatar: {
                        required: true
                    },
                },
                messages: {
                    nickname: {
                        required: "不能为空",
                    },
                    avatar: {
                        required: "不能为空"
                    },
                },
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent());
                }
            });
        });
        function showImg(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preavatar").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
    </script>
</head>
<body>
<%@ include file="header.jsp"%>
<div class="order-container container">
    <div class="tab-container">
        <div class="tab-title-container">
            <div class="tab-title active" >订单</div>
            <div class="tab-title">资料</div>
        </div>
    </div>
    <div id="orderList">
        <div class="mod-title">
            <h2>全部订单</h2>
        </div>
        <div id="order-Lists">
        </div>
    </div>
    <div id="info">
        <div class="mod-title">
            <h2>个人资料</h2>
        </div>
        <div>
            <div style="margin-top: 20px">
                <span style="display: inline-block;margin-top: 20px;font-size: 16px">头像:</span>
                <span style="display: inline-block">
                    <img id="avatar" src="" style="width: 100px;height: 100px;border-radius: 50%;border: 2px #cccccc solid;margin-left: 20px">
                </span>
            </div>
            <div style="margin-top: 10px">
                <span style="display: inline-block;margin-top: 20px;font-size: 16px">昵称:</span>
                <span style="display: inline-block;margin-top: 20px;font-size: 16px" id="nickname"></span>
            </div>
            <button type="button" class="btn btn-danger" style="margin-top: 20px" data-toggle="modal" data-target="#myModal">修改</button>
        </div>
    </div>
</div>
<div class="footer" id="footer">
    <!--底部-->
    <span>©2020 i movie电影</span>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改资料</h4>
            </div>
            <div class="modal-body">
                <form id="changeInfo">
                    <div class="form-group">
                        <label for="exampleInputEmail1">昵称</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="昵称" name="nickname">
                    </div>
                    <div class="form-group">
                        <label>头像</label>
                        <div class="div_imgall">
                            <input class="input_flie" type="file" onchange="showImg(this)" name="avatar" id="photoFile">
                            <div>
                                <img src="http://127.0.0.1:8088/touxiang.png" class="pre-pic" id="preavatar"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script id="orderLists" type="text/html">
    {{each list item index}}
    <div class="film-list">
        <div class="film-cell">
            <div class="film-info">
                <a href="" class="film-name">{{item.session_id.movie_id.name}}</a>
                <p class="film-address">{{item.session_id.cinema_id.name}}&nbsp;&nbsp;&nbsp;场次:{{item.session_id.day}} {{item.session_id.time}}</p>
            </div>
            <div class="info">
                <p>取票号：{{item.code}}</p>
            </div>
        </div>
    </div>
    {{/each}}
</script>
</body>
</html>
